<script setup lang="ts">
const { VITE_API_BASE_URL } = import.meta.env;
defineOptions({
  name: "ReImageVerify"
});

interface Props {
  timestamp?: number;
}
interface Emits {
  (e: "update:timestamp", timestamp: number): void;
}
const props = withDefaults(defineProps<Props>(), {
  timestamp: Date.now().valueOf()
});

const emit = defineEmits<Emits>();

function refresh() {
  emit("update:timestamp", Date.now().valueOf());
}
</script>

<template>
  <el-image
    style="width: 120px; height: 40px"
    :src="`${VITE_API_BASE_URL}/auth/captcha_image?timestamp=${props.timestamp}`"
    @click="refresh"
  >
    <template #error>
      <div class="image-slot">
        <IconifyIconOnline
          icon="clarity:picture-solid"
          width="12xpx"
          height="40px"
        />
      </div>
    </template>
  </el-image>
</template>
